<template>
	<view class="container">
		<!-- 标题栏和状态栏占位符 -->
		<view class="titleNview-placing"></view>
		<view class="tab">
			<!-- <view class="v">
				推荐
			</view>
			<view class="v">
				价格
			</view>
			<view class="v">
				排序
			</view> -->
			<view class="r" @click="lo">
				<image  v-if="list==2" src="../../static/img/3/3-102.png" mode="widthFix"></image>
				<image   v-if="list==1" src="../../static/img/4/4-4.png" mode="widthFix"></image>
			</view>
		</view>
		<scroll-view class="list" scroll-y="true" lower-threshold="20" @scrolltolower="add">
			<view class="guess-section " :class="{'gls':list==2}">
				<view class="guess-item" v-for="(g,index) in goodsList" :key="index" @click="toDetail(g.pid)">
					<view class="image-wrapper">
						<image :src="g.defaultAlbum" mode="aspectFill"></image>
					</view>
					<view class="text">
						<text class="title clamp">{{g.pName}}</text>
						<text class="price"><text class="unit">￥</text>{{g.fSalePrice}} <text class="min"  v-if="list==2">销量:{{g.iSales}}件</text></text>
						<!-- <text class="but">{{g.promotionTags}}</text> -->
						<view class="ico" v-if="list==2">
							<image src="../../static/img/2/2-28.png" mode="widthFix"></image>
							<image src="../../static/img/2/2-13.png" mode="widthFix"></image>
							<image src="../../static/img/2/2-19.png" mode="widthFix"></image>
						</view>
					</view>

				</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:1,
				page:1,
				goodsList:[]
			};
		},
		props:["shop_id"],

		mounted() {
			this.getGoods()


		},
		
		methods: {
			getGoods() {
				
				this.$Request.post(
					this.$api.httpApi.search.search + "&token=" + this.$SysCache.get('token'), {
						queryCondition: {
							order: {
								fieldname: "iOrder",
								direction: "asc"
							},
							pageindex: this.page,
							pagesize: 20,
							where: [ {
								fieldname: "shop_id",
								valuefrom: this.shop_id
							}]
						}
					}
				).then(res => {
					if (res.code == 200) {
						this.goodsList = this.goodsList.concat(res.data.data)
						this.page++
						if(res.data.data == 0){
							uni.showToast({
								title:"没有更多了！",
								icon:"none"
							})
						}
					}
				})
			},
			
			lo(){
				var li=this.list
				if(li==1){
					this.list=2
				}else{
					this.list=1
				}
			},
			toDetail(id){
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}&iShopId=${this.shop_id}`
				})
			},
			add(){
				this.getGoods()
			}
		}

	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		background-color: #EBEBEB;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 420upx;
			box-sizing: content-box;
		}

		.list {
			background-color: #ebebeb;
			width: 100%;
			position: relative;
			z-index: 10;
			padding-top: 20rpx;
			height: 100%;
			.guess-section {
				display: flex;
				flex-wrap: wrap;
				padding: 0 30upx;

				.guess-item {
					// display: flex;
					// flex-direction: column;
					width: 48%;
					padding-bottom: 29upx;
					background: #fff;
					margin-top: 21rpx;
					&:nth-child(2n+1) {
						margin-right: 21upx;
					}

				}
				.text{
					display: block;
					width: 100%;
				}
				.image-wrapper {
					width: 100%;
					height: 330upx;
					border-radius: 3px;
					overflow: hidden;
					background: #fff;

					image {
						width: 100%;
						height: 100%;
						opacity: 1;
					}
				}

				.title {
					font-size: 23upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(68, 68, 68, 1);
					line-height: 35upx;
					padding-left: 30upx;
					padding-right: 30upx;
					margin-top: 5rpx;
				}

				.but {
					display: block;
					width: 98rpx;
					height: 31rpx;
					background: rgba(247, 172, 3, 0);
					border: 1px solid #FF3058;
					border-radius: 16rpx;
					text-align: center;
					line-height: 31rpx;
					margin-left: 30rpx;
					font-size: 16rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FF3058;
					margin-top: 5rpx;
				}

				.price {
					font-size: 26upx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: rgba(240, 64, 111, 1);
					padding-left: 30upx;
					position: relative;
					.min{
						margin-left: 10rpx;
						font-size: 16rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #888888;
					}
					.pay {
						font-size: 17upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
						margin-left: 6upx;
					}

					.collect {
						position: absolute;
						right: 29upx;
						bottom: 10upx;
						width: 30upx;
						height: 28upx;
						z-index: 1;
					}

				}


			}

			.gls{
				display: block;
				
				.guess-item{
					width: 100%;
					padding-bottom: 0;
					.image-wrapper{
						display: inline-block;
						vertical-align: middle;
						width: 259rpx;
						padding-bottom: 28rpx;
						padding-top: 28rpx;
						height: 259rpx;
						padding-left: 40rpx;
						overflow: hidden;
						border-right:1px solid   rgba(0, 0, 0, 0.08);
						padding-right: 40rpx;
						image{
							display: block;
							margin: auto;
							width: 100%;
							height: 100%;
						}
					}
					.text{
						display: inline-block;
						vertical-align: middle;
						width: calc(100% - 259rpx);
						.ico{
							margin-top: 10rpx;
							padding-left: 30rpx;
							image{
								display: inline-block;
								vertical-align: middle;
								width: 28rpx;
								margin-right: 32rpx;
							}
						}
					}
				}
			}
		}

		.tab {
			height: 79rpx;
			background-color: #fff;
			width: 100%;
			position: relative;
			z-index: 10;

			.r {
				float: right;
				width: 79rpx;
				height: 79rpx;
				line-height: 68rpx;
				text-align: center;

				image {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
			}

			.v {
				display: inline-block;
				margin-right: 15rpx;
				padding-left: 25rpx;
				padding-right: 25rpx;
				height: 79rpx;
				line-height: 79rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.con {
		height: calc(100% - 153rpx);
		background-color: #EBEBEB;

	}
</style>
